<template>
  <div id="nav">
    <header id="header" v-if="$route.name != 'Login' && $route.name != 'Search'">
      <div class="logoBox">
        <strong><b>A</b>YM</strong>
        <span>V-Test</span>
      </div>
      <div class="menuBox">
        <span v-for="item in routes" :key="item.path">
          <router-link v-if="!item.hidden" :to="item.path" :class="{ active: item.path == $route.path }">
            <i :class="item.icon"></i>
            {{ item.name }}
          </router-link>
        </span>
      </div>
      <div class="infoBox">
        <span><i class="el-icon-time"></i> 2020-22-22</span> | <span><i class="el-icon-user"></i> 张某</span> |
        <span @click="logout()"><i class="el-icon-switch-button"></i> 退出</span>
      </div>
    </header>
    <transition name="fade-transform" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      routes: [],
    };
  },
  mounted() {
    this.routes = this.$router.options.routes;
  },
  methods: {
    logout() {
      this.$router.push({ name: "Login" });
    },
  },
};
</script>

<style lang="scss"></style>
